<template>
  <div>
    <!-- 搜索栏 -->
    <van-search
      v-model="searchtext"
      show-action
      shape="square"
      background="#3296fa"
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
      @focus="onFocus"
    />
    <!-- /搜索栏 -->

    <!-- 搜索历史 -->
    <searchhistory v-if="ishistory" :searchtext="searchtext"></searchhistory>
    <!-- /搜索历史 -->

    <!-- 搜索结果 -->
    <searchresults
      v-else-if="isresults"
      :searchtext="searchtext"
    ></searchresults>
    <!-- /搜索结果 -->

    <!-- 搜索联想 -->
    <searchlenovo
      v-else
      :searchtext="searchtext"
      @search="onSearch"
    ></searchlenovo>
    <!-- /搜索联想 -->
  </div>
</template>

<script>
import searchhistory from "@/views/search/componentes/search-history";
import searchresults from "@/views/search/componentes/search-results";
import searchlenovo from "@/views/search/componentes/search-lenovo";
export default {
  data() {
    return {
      searchtext: "", ///搜索输入内容
      searchtextlist: [], //搜索历史
      ishistory: true, //搜索历史显隐状态
      isresults: false, //搜索结果显隐状态
    };
  },
  // 注册子组件
  components: {
    searchhistory,
    searchresults,
    searchlenovo,
  },
  watch: {
    searchtext(value) {
      this.isresults = false;
      if (value) {
        this.ishistory = true;
      }
    },
  },
  methods: {
    // 获得搜索结果
    async onSearch(value) {
      this.searchtext = value;
      this.isresults = true;
      this.searchtextlist.push(this.searchtext);
      window.localStorage.setItem(
        "HEIMA_searchtextlist",
        JSON.stringify(this.searchtextlist)
      );
      console.log("aaa");
    },

    onCancel() {
      this.$router.back();
    },
    onFocus() {
      this.ishistory = false;
    },
  },
};
</script>

<style>
</style>